$(function () {
  //初始化文章分类列表
  //因为添加修改删除都要重新渲染页面 所以封装函数

  initArtCateList()
  let layer = layui.layer
  function initArtCateList() {
    axios({
      method: 'GET',
      url: '/my/article/cates'
    }).then(function (res) {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)

      }
      // 成功后渲染
      let arr = []
      // 遍历返回的数据
      res.data.data.forEach(element => {
        // 正能量 清空
        // axios({
        //   method: 'POST',
        //   url: '/my/article/updatecate',
        //   data: 'name=&alias=&Id=' + element.Id
        // })
        arr.push(`
                <tr>
                    <td>${element.Id}</td>
                    <td>${element.name}</td>
                    <td>${element.alias}</td>
                    <td>
                        <button data-id="${element.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button>
                        <button data-id="${element.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
                `)
      });

      $('tbody').empty().html(arr.join(''))
    })
  }


  //存open的返回值,删除的时候要用
  let indexAdd = 0
  // 点击添加按钮显示弹出层
  $('#addBtn').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      title: '添加文章类别',
      area: ['500px', '250px'],
      content: `
                    <form class="layui-form" action="" id="formAdd">
                        <!-- 分类名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <!-- 分类别名 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <!-- 按钮 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
            `
    });
  })



  // 添加文章分类
  // 给创建的表单绑定提交事件
  // 由于是动态创建的所以一层层找 最后只能委托给body
  $('body').on('submit', '#formAdd', function (e) {
    // 阻止默认提交
    e.preventDefault()
    //发送ajax
    axios({
      method: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize()
    }).then(function (res) {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      //成功提示
      layer.msg('添加文章类别成功！')
      //渲染页面
      initArtCateList()
      //清空表单
      $('#formAdd')[0].reset()
      //关闭弹出层
      layer.close(indexAdd)
    })
  })

  //修改弹出层 
  let indexEdit = 0
  //点击修改显示弹出层
  $('tbody').on('click', '.btn-edit', function () {
    // 点击编辑按钮 第1部分 弹出层
    indexEdit = layer.open({
      type: 1,
      title: '修改文章类别',
      area: ['500px', '250px'],
      content: `
                    <form  lay-filter="formEdit"  class="layui-form" action="" id="formEdit">

                        <!-- 隐藏域保存id -->
                        <input type="hidden" name="Id"></input>

                        <!-- 分类名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <!-- 分类别名 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <!-- 按钮 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
            `
    })

    // 点击编辑按钮 第2部分 赋值
    // (获取数据和渲染数据要写到.btn-edit的点击事件里)
    let id = $(this).attr('data-id')
    // 渲染分类信息
    axios({
      method: 'GET',
      //url参数写在路径里
      // 传值的时候:必须省略 / 必须保留
      url: '/my/article/cates/' + id
    }).then(function (res) {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      //成功后渲染
      layui.form.val('formEdit', res.data.data)
    })
  })

  //修改文章分类 和添加是同一种结构
  $('body').on('submit', '#formEdit', function (e) {
    // 阻止默认提交
    e.preventDefault()
    //发送ajax
    axios({
      method: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize()
    }).then(function (res) {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      //成功提示
      layer.msg('修改文章类别成功！')
      //渲染页面
      initArtCateList()
      //清空表单
      $('#formEdit')[0].reset()
      //关闭弹出层
      layer.close(indexEdit)
    })
  })


  //删除文章分类
  $('tbody').on('click', '.btn-del', function () {
    // 获取自定义属性值
    let id = $(this).attr('data-id')
    // 询问框
    layer.confirm('确认删除吗？', { icon: 3, title: '提示' }, function (index) {
      // 发送ajax
      axios({
        method: 'GET',
        url: '/my/article/deletecate/' + id
      }).then(function (res) {
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layer.msg('删除文章分类成功！')
        initArtCateList()
      })
      // 关闭弹出层
      layer.close(index);
    });
  })
})

